<script setup name="FileSelector">
import { ElMessage } from 'element-plus';
import AttachmentSelectorDialog from '../attachmentSelector/AttachmentSelectorDialog.vue';
// import VideoPreview from "../videoSelector/videoPreview/VideoPreview.vue";

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
});

const isShowSelector = ref(false);
const isShowPreview = ref(false);
const previewInfo = ref({});
const fileList = computed(() => JSON.parse(props.modelValue || '[]'));

const preview = (item) => {
	// const { type, src } = item;
	// previewInfo.value = item;
	// isShowPreview.value = true;
	// if (["pdf", "ppt"].includes(type)) {
	//     ElMessage.success("正在打开预览...");
	//     axios
	//         .get(src, {
	//             responseType: "blob",
	//         })
	//         .then((res) => {
	//             console.log(res);
	//             var blob = new Blob([res.data], { type: "application/pdf" });
	//             const url = URL.createObjectURL(blob);
	//             window.open(url);
	//             setTimeout(() => {
	//                 URL.revokeObjectURL(url);
	//             }, 3000); //释放资源
	//         })
	//         .catch(() => {
	//             ElMessage.error("文件下载失败，请稍后重试！");
	//         });
	//     // window.open(src);
	// } else {
	//     ElMessage.warning("该文件不支持预览！");
	// }
};
const getSelectedList = (list) => {
	const selectedList = [];
	list.forEach((item) => {
		const isRepeat = !!fileList.value.find(({ id }) => id === item.id);
		if (isRepeat) return;
		selectedList.push({
			id: item.id,
			name: item.name,
			imgUrl: item.imgUrl,
		});
	});
	selectedList.unshift(...fileList.value);
	emit('update:modelValue', JSON.stringify(selectedList));
};
const delFileItem = (index) => {
	fileList.value.splice(index, 1);
	emit('update:modelValue', JSON.stringify(fileList.value));
};
</script>
<template>
	<div class="FileSelector">
		<ul class="file_list">
			<div class="btn">
				<a href="javascript:;" @click="isShowSelector = true">
					<el-icon><Plus /></el-icon>
				</a>
			</div>
			<li v-for="(item, index) in fileList" :key="index">
				<a href="javascript:;" class="file_icon" @click="preview(item)">
					<el-icon><Document /></el-icon>
				</a>
				<div class="name ellipsis">{{ item.name }}</div>
				<a href="javascript:;" class="del_btn" @click="delFileItem(index)">
					<el-icon><CloseBold /></el-icon>
				</a>
			</li>
		</ul>
	</div>
	<AttachmentSelectorDialog v-model="isShowSelector" @submit="getSelectedList" />
	<!-- <FilePreview v-model="isShowPreview" :previewInfo="previewInfo" /> -->
	<!-- <VideoPreview v-model="isShowPreview" :src="previewInfo.src" /> -->
</template>

<style lang="scss" scoped>
.FileSelector {
	border: 1px solid var(--el-color-primary);
	padding: 20px 30px;
	.file_list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0 -10px;
		li {
			position: relative;
			width: 100px;
			padding: 0 10px;
			margin-bottom: 20px;
			.file_icon {
				display: block;
				text-align: center;

				.icon {
					font-size: 40px;
				}
			}
			.name {
				max-width: 100px;
				text-align: center;
			}
			.del_btn {
				display: none;
				position: absolute;
				top: 0px;
				right: 10px;
				&:hover {
					color: var(--el-color-primary);
				}
			}
			&:hover {
				.del_btn {
					display: inline;
				}
			}
		}
	}
	.btn {
		flex-shrink: 0;
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		a {
			display: block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border: 1px solid var(--el-color-primary);
			border-radius: 4px;
		}
	}
}
</style>
